<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>大屏管理</el-breadcrumb-item>
      <el-breadcrumb-item>工作时间列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="searchData()">
        <el-form-item label="VCID：" >
          <div class="grid-content bg-purple" style="width: 80%;">
            <el-input v-model="dataForm.vcId"  clearable></el-input>
          </div>
        </el-form-item>
        <el-form-item label="技能名称：" >
          <div class="grid-content bg-purple" style="width: 80%;">
            <el-input v-model="dataForm.skill"  clearable></el-input>
          </div>
        </el-form-item>
<!--        <el-form-item label="开始时间：" prop="startTime">-->
<!--          <el-date-picker type="datetime" placeholder="选择日期" v-model="dataForm.startTime" style="width: 80%;"></el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="结束时间：" prop="endTime">-->
<!--          <el-date-picker type="datetime" placeholder="选择日期" v-model="dataForm.endTime" style="width: 80%;"></el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item label="通话时间">
          <el-date-picker v-model="dataForm.searchTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
          </el-date-picker>
        </el-form-item>
<!--        <el-form-item label="修改时间：" prop="modifyDate">-->
<!--          <el-date-picker type="datetime" placeholder="选择日期" v-model="dataForm.modifyDate" style="width: 80%;"></el-date-picker>-->
<!--        </el-form-item>-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchData()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" icon="el-icon-search" @click="resetDataFrom">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-plus" @click="addDialogVisible = true">新增</el-button>
          </el-form-item>
      </el-form>
       <!--用户列表 border边框 stripe隔行变色-->
      <el-table :data="workTimelist" border stripe>
<!--        <el-table-column type="index"></el-table-column> &lt;!&ndash;索引列&ndash;&gt;-->
        <el-table-column type="selection" header-align="center" align="center" width="50" label="选择">
        </el-table-column>
        <el-table-column label="VCID" prop="vcId"></el-table-column>
        <el-table-column label="技能名称" prop="skill"></el-table-column>
        <el-table-column label="开始时间" prop="startTime">
          <template slot-scope="scope">
            {{scope.row.startTime | dateYMDHMSFormat}}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="endTime">
          <template slot-scope="scope">
            {{scope.row.endTime | dateYMDHMSFormat}}
          </template>
        </el-table-column>
        <el-table-column label="工作时间限额" prop="workCNT"></el-table-column>
        <el-table-column label="修改时间" prop="modifyDate">
          <template slot-scope="scope">
            {{scope.row.modifyDate | dateYMDHMSFormat}}
          </template>
        </el-table-column>
        <el-table-column label="非工作时间限额" prop="unWorkCNT"></el-table-column>
        <el-table-column label="波动系数" prop="fPercent"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.vcId)"></el-button>
            <!-- 删除 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteWorkTime(scope.row.vcId)"></el-button>
            <!-- 权限 -->
            <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="dataForm.pageNum"
        :page-sizes="[1, 2, 5, 100]"
        :page-size="dataForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 创建对话框 -->
    <el-dialog title="添加数据" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="formRules"
        ref="addFormRef" label-width="70px">
        <!-- vcId -->
        <el-form-item label="VCID" prop="vcId">
          <el-input v-model="addForm.vcId"></el-input>
        </el-form-item>
        <!-- 技能 -->
        <el-form-item label="技能名称" prop="skill">
          <el-input v-model="addForm.skill"></el-input>
        </el-form-item>
        <!-- 开始时间 -->
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.startTime" style="width: 80%;"></el-date-picker>
        </el-form-item>
        <!-- 结束时间 -->
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.endTime" style="width: 80%;"></el-date-picker>
        </el-form-item>
        <!-- 修改时间 -->
        <el-form-item label="修改时间" prop="modifyDate">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.modifyDate" style="width: 80%;"></el-date-picker>
        </el-form-item>
        <!-- 工作时间限额 -->
        <el-form-item label="工作时间限额" prop="workCNT">
          <el-input v-model="addForm.workCNT"></el-input>
        </el-form-item>
        <!-- 非工作时间限额 -->
        <el-form-item label="非工作时间限额" prop="unWorkCNT">
          <el-input v-model="addForm.unWorkCNT"></el-input>
        </el-form-item>
        <!-- 波动系数 -->
        <el-form-item label="波动系数" prop="fPercent">
          <el-input v-model="addForm.fPercent"></el-input>
        </el-form-item>
      </el-form>
      <!-- 内容底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="50%" @colse="editDialogClosed">
       <el-form :model="editForm" :rules="formRules" ref="editFormRef" label-width="70px">
         <!-- vcId -->
         <el-form-item label="VCID" prop="vcId">
           <el-input v-model="editForm.vcId" readOnly></el-input>
         </el-form-item>
        <!-- 技能名称 -->
        <el-form-item label="技能名称" prop="skill">
          <el-input v-model="editForm.skill"></el-input>
        </el-form-item>
        <!-- 开始时间 -->
         <el-form-item label="开始时间" prop="startTime">
           <el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.startTime" style="width: 80%;"></el-date-picker>
         </el-form-item>
        <!-- 结束时间 -->
         <el-form-item label="结束时间" prop="endTime">
           <el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.endTime" style="width: 80%;"></el-date-picker>
         </el-form-item>
         <!-- 修改时间 -->
         <el-form-item label="修改时间" prop="modifyDate">
           <el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.modifyDate" style="width: 80%;"></el-date-picker>
         </el-form-item>
         <!-- 工作时间限额 -->
         <el-form-item label="工作时间限额" prop="workCNT">
           <el-input v-model="editForm.workCNT"></el-input>
         </el-form-item>
         <!-- 非工作时间限额 -->
         <el-form-item label="非工作时间限额" prop="unWorkCNT">
           <el-input v-model="editForm.unWorkCNT"></el-input>
         </el-form-item>
         <!-- 波动系数 -->
         <el-form-item label="波动系数" prop="fPercent">
           <el-input v-model="editForm.fPercent"></el-input>
         </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editWorkTime">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 请求数据
      //搜索相关
	    dataForm: {
        vcId:'',
        skill:'',
        searchTime: [],
        // startTime:null,
        // endTime:null,
        startTime: '',
        endTime: '',
        //modifyDate:null,
        //分页
		    pageNum: 1,
		    pageSize: 5,
	    },
      workTimelist: [],// 列表
     
      total: 0, // 最大数据记录
      addDialogVisible: false ,// 对话框显示
      // 添加表单项
      addForm: {
        vcId:'',
        skill:'',
        startTime:null,
        endTime:null,
        modifyDate:null,
        workCNT:'',
        unWorkCNT:'',
        fPercent:null,
      }, 
      // 控制修改对话框显示/隐藏
      editDialogVisible:false,
      // 修改信息
      editForm:{
        vcId:'',
        skill:'',
        startTime:null,
        endTime:null,
        modifyDate:null,
        workCNT:'',
        unWorkCNT:'',
        fPercent:null,
      },
      // 验证规则
      formRules:{
        vcId:[
          { required: true, message: "该字段不能为空", trigger: "blur" },
        ],
        skill:[
           { required: true, message: "该字段不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getWorkTimeList();
  },
  methods: {
    // 查询方法
    searchData() {
      this.getWorkTimeList();
    },
    async getWorkTimeList() {
      console.log("dataFrom请求参数为：",this.dataForm)
      if(this.dataForm.searchTime != undefined) {
        this.dataForm.endTime = this.dataForm.searchTime[1]
        this.dataForm.startTime = this.dataForm.searchTime[0]
      }
      // 调用post请求
      const { data:res } = await this.$http.post("/workTimeList", {
        //params: this.dataForm
        vcId:this.dataForm.vcId,
        skill:this.dataForm.skill,
        pageNum: this.dataForm.pageNum,
        pageSize: this.dataForm.pageSize,
        startTime: this.dataForm.startTime,
        endTime: this.dataForm.endTime,
      });
      if(res.success){
        console.log("######",res.data)
        this.workTimelist = res.data; // 将返回数据赋值
        this.total = res.total; // 总个数
      }
    },
    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      this.dataForm.pageSize = newSize;
      this.getWorkTimeList(); // 数据发生改变重新申请数据
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newPage) {
      this.dataForm.pageNum = newPage;
      this.getWorkTimeList(); // 数据发生改变重新申请数据
    },
    // 监听数据
    addDialogClosed(){
      this.$refs.addFormRef.resetFields();// 重置表单项
    },
    // 添加数据
    async add(){
      this.$refs.addFormRef.validate(async valid => {
        console.log(valid);
        if( !valid ) return;
        // 发起请求
        const {data: res} = await this.$http.post("add", this.addForm);
        if (!res.success) {
          return this.$message.error("操作失败！！！");
        }
        this.$message.success("操作成功！！！");
        //隐藏
        this.addDialogVisible = false;
        this.getWorkTimeList();
      })
    },
    //重置按钮
    resetDataFrom(){
      this.dataForm.vcId='',
      this.dataForm.skill='',
      this.dataForm.searchTime= []
    },
    // 展示修改框
    async showEditDialog(vcId){
        const {data:res} = await this.$http.get("getWorkTimeById?vcId="+vcId);
        if(res.success){
          this.editForm = res.data;
          this.editDialogVisible = true;
        }else{
          this.$message.error("操作失败！！！");
        }
    },
    // 关闭窗口
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();
    },
    // 确认修改
    editWorkTime(){
      this.$refs.editFormRef.validate(async valid =>{
        console.log(valid);
        if( !valid ) return;
        // 发起请求
        const {data:res} = await this.$http.put("editWorkTime",this.editForm);
        console.log(res);
         if (!res.success) return this.$message.error("操作失败！！！");
        this.$message.success("操作成功！！！");
        //隐藏
        this.editDialogVisible = false;
        this.getWorkTimeList();
      });
    },
    // 删除按钮
    async deleteWorkTime(vcId){
      // 弹框
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
      // 成功删除为confirm 取消为 cancel
      if(confirmResult!='confirm'){
        return this.$message.info("已取消删除");
      }
      const {data:res} = await this.$http.delete("deleteWorkTime?vcId="+vcId);
      if (!res.success) {
        return this.$message.error("操作失败！！！");
      }
      this.$message.success("操作成功！！！");
      this.getWorkTimeList();
    },
  }
};
</script>
<style lang="less" scoped>

</style>